<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>用户分配角色</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script type="text/javascript" src="./lib/layui/layui.js"
	charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<div class="layui-fluid">
		<div class="layui-row">
			<form id="ff" action="" method="post"
				class="layui-form layui-form-pane">
				<div class="layui-form-item">
					<label for="name" class="layui-form-label"> 用户名 </label>
					<div class="layui-input-inline">
						<input type="text" id="name" name="name" required=""
							lay-verify="required" autocomplete="off" class="layui-input"
							readonly="readonly">
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label"> 选择角色 </label>
					<table id="tt" class="layui-table layui-input-block">
						<tbody>
							<tr>
								<td><input type="checkbox" name="like1[write]"
									lay-skin="primary" lay-filter="father" title="全部角色"></td>
								<td>
									<div id="roles" class="layui-input-block"></div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript">
    	function showRole(roles){
    		layui.use('form',function(){
    		  var form = layui.form;
    		  $ = layui.jquery;
    		  	console.log(roles);
    		  	//加载前清空角色信息
    		  	$("#roles").html("");
    		  	//加载角色信息
   	        	   $.get(
   	   	        	"/role/findAll"
   	   	      ,function(res){
   	   	        		//显示所有角色
   	   	        		$(res.data).each(function(index,obj){
   	   	      				$("#roles").append(
   	   	  	        			'<input name="role" lay-skin="primary" lay-filter="role" type="checkbox" value="'+obj.rid+'" title="'+obj.name+'">'
   	   	      				);
   	   	        		});
   	   	        		//勾选已选角色
   	   	        		$(roles).each(function(index,role){//外层循环是用户拥有的角色
   	   	        			$("input[name='role']").each(function(index,input){//内层循环是所有角色
   	   	        				if(role.rid==input.value){
   	   	        					$(input).attr("checked",true);//勾选匹配元素
   	   	        				}
   	   	        			});
   	   	        		});
   	   	        		form.render('checkbox');
   	   	        	},'json'
   	   	          );
    		});
    	}
    </script>
	<script>
    
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
          
          
          
          //监听设置角色复选框
          form.on('checkbox(role)',function(data){
        	  $.post(
        			'/users/setRole',
        			{
        				uid:$("input[name='loginName']").attr("id"),
        				rid:data.value,
        				checked:data.elem.checked
        			}
        	  );
          })
          
         
          //自定义验证规则
          form.verify({
            nikename: function(value){
              if(value.length < 5){
                return '昵称至少得5个字符啊';
              }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
          });

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            $.post(
            	"/role/save"
            	,data.field
            );
            
            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
          });


        form.on('checkbox(father)', function(data){

            if(data.elem.checked){
                $(data.elem).parent().siblings('td').find('input').prop("checked", true);
                form.render(); 
            }else{
               $(data.elem).parent().siblings('td').find('input').prop("checked", false);
                form.render();  
            }
        });
          
          
        });
    </script>
	
</body>
</html>
